@extends('admin.layout')

@section('title', '管理文章')

@section('body')
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header search-header">
                        <form class="layui-form" lay-filter="myform">
                            <div class=" layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">文章ID</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="id" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">标题关键字</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="title" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">文章分类</label>
                                    <div class="layui-input-inline">
                                        <select name="category_id">
                                            <option value="">所有分类</option>
                                            @foreach ($cate as $v)
                                                <option value="{{ $v['id'] }}">{{ $v['name'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">状态</label>
                                    <div class="layui-input-inline">
                                        <select name="status">
                                            <option value="">所有状态</option>
                                            <option value="0">草稿箱</option>
                                            <option value="1">已发布</option>
                                            <option value="2">回收站</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn" lay-submit="" lay-filter="listbox-search" type="submit">搜索</button>
                                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="layui-card-body">
                        <table id="listbox"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @verbatim
        <script type="text/html" id="titleTpl">
            {{# if(d.url){ }}
            <a href="{{ d.url }}" target="_blank">{{= d.title }}</a>
            {{#  }else{ }}
            {{= d.title }}
            {{#  } }}
        </script>
        <script type="text/html" id="cateName">
            {{= d.category.name }}
        </script>
        <script type="text/html" id="statusTpl">
            {{#  if(d.status==1){ }}
            <span style="color:#5FB878"><i class="layui-icon layui-icon-ok"></i>已发布</span>
            {{#  }else if(d.status==2){ }}
            <span style="color:#FFB800"><i class="layui-icon layui-icon-delete"></i>回收站</span>
            {{#  }else{ }}
            <i class="layui-icon layui-icon-survey"></i>草稿箱
            {{#  } }}
        </script>
        <script type="text/html" id="actionBar">
            <a href="/admin/article/edit?id={{= d.id }}" class="layui-btn layui-btn-xs layui-btn-normal">
                <i class="layui-icon layui-icon-edit"></i>编辑
            </a>
            <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">
                <i class="layui-icon layui-icon-delete"></i>删除
            </button>
        </script>
    @endverbatim
    <script>
        layui.use(['form', 'layer', 'table'], function () {
            var $ = layui.$;
            var form = layui.form;
            var layer = layui.layer;
            var table = layui.table;

            var tableIns = table.render({
                elem: '#listbox', //指定原始表格元素选择器（推荐id选择器）
                url: '/admin/article/list',
                where: form.val('myform'),
                page: {
                    curr: 1
                },
                limit: 15,
                limits: [10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100],
                cols: [[
                    {field: 'id', width: 80, align: 'center', title: 'ID'},
                    {field: 'title', minWidth: 300, templet: '#titleTpl', title: '文章标题'},
                    {field: 'category_name', width: 120, align: 'center', templet: '#cateName', title: '分类名称'},
                    {field: 'comments_count', width: 100, align: 'center', title: '评论数量'},
                    {field: 'created_at', width: 180, align: 'center', title: '创建时间'},
                    {field: 'updated_at', width: 180, align: 'center', title: '更新时间'},
                    {field: 'status', align: 'center', width: 100, templet: '#statusTpl', title: '状态'},
                    {align: 'center', width: 150, toolbar: '#actionBar', title: '操作'}
                ]],
                done: function (res, curr) {
                    if (curr > 1 && res.data.length === 0) {
                        tableIns.reload({
                            page: {
                                curr: curr - 1
                            }
                        });
                    }
                },
                parseData: function (res) {
                    return {
                        code: res.code,
                        msg: res.msg,
                        count: res.data.total,
                        data: res.data.items,
                        limit: res.data.limit
                    };
                }
            });

            form.on('submit(listbox-search)', function (data) {
                tableIns.reload({
                    where: data.field,
                    page: {
                        curr: 1
                    }
                });
                return false;
            });

            table.on('tool', function (obj) {
                if (obj.event === 'del') {
                    layer.confirm('确定删除此文章【ID:' + obj.data.id + '】吗？', {
                        icon: 3,
                        btn: ['永久删除', '放回收站', '取消']
                    }, function () {
                        deleteArticle(obj.data.id, 1);
                    }, function () {
                        deleteArticle(obj.data.id, 0);
                    });
                }
            });

            function deleteArticle(id, type) {
                $.post('/admin/article/del', {id: id, type: type}, function (res) {
                    if (res.code === 0) {
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 1000
                        }, function () {
                            tableIns.reload();
                        });
                    } else {
                        layer.msg(res.msg, {icon: 5});
                    }
                }, 'json');
            }
        });
    </script>
@endsection
